<template>
  <div style="padding: 20px">
    <el-form v-if="branch">
      <el-form-item>
        <div>{{ branch.FLB_Name }}</div>
      </el-form-item>
      <el-form-item v-if="!branch.FLB_IsDefault">
        <el-card
          v-for="(group, gIndex) in branch.ConditionGroups"
          :key="gIndex"
        >
          <div slot="header">
            条件组{{ gIndex + 1 }}
            <!-- <span style="color: red; margin-left: 30px">
              触发条件为该组内条件全部满足
            </span> -->
          </div>
          <template v-for="(condition, cIndex) in group.Conditions">
            <el-divider :key="cIndex" v-if="cIndex != 0">并且</el-divider>
            <div
              v-if="!condition.Deleted"
              :key="cIndex"
              style="display: flex; align-items: center"
            >
              <i v-if="condition.IsNew" class="el-icon-star-on"></i>
              <i v-if="condition.IsModified" class="el-icon-star-off"></i>
              <span>条件{{ cIndex + 1 }}</span>
              <el-select
                v-model="condition.FLBC_FieldGuid"
                style="width: 160px; margin-left: 10px"
                placeholder="可选条件组件"
                @change="(val) => setConditionField(condition, val)"
              >
                <el-option
                  v-for="field in conditionFields"
                  :key="field.FF_Guid"
                  :value="field.FF_Guid"
                  :label="field.FF_DisplayName"
                ></el-option>
              </el-select>
              <el-select
                v-model="condition.FLBC_Expression"
                style="width: 100px; margin-left: 10px"
                placeholder="表达式"
                @change="(val) => setConditionExp(condition, val)"
              >
                <el-option
                  v-for="item in condition.exps"
                  :key="item.exp"
                  :value="item.exp"
                  :label="item.text"
                ></el-option>
              </el-select>
              <conditionField
                :condition="condition"
                style="flex: 1"
                @change="(val) => setConditionVal(condition, val)"
              />
              <i class="el-icon-delete" @click="deleteCondition(condition)"></i>
            </div>
          </template>

          <el-button type="text" @click="addCondition(group)">
            添加条件
          </el-button>
        </el-card>
        <el-button @click="addConditionGroup()">添加组</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { generateGUID } from '@/utils/guid'
import conditionField from '@/views/web/flowManage/components/conditionField.vue'
export default {
  props: ['branch', 'conditionFields'],
  components: { conditionField },
  data: function () {
    return {}
  },
  methods: {
    // getConditionExps(condition) {
    //   if (!condition.exps || condition.exps.length == 0) {
    //     condition.exps = JSON.parse(condition.FFLD_Expressions)
    //     this.$forceUpdate()
    //     console.log('init')
    //   }
    // },
    setConditionField(condition, val) {
      let field = this.conditionFields.find((x) => x.FF_Guid == val)
      console.log(field.FFLD_Expressions, field.exps)
      condition.FF_DisplayName = field.FF_DisplayName
      condition.FFLD_Expressions = field.FFLD_Expressions
      condition.exps = field.exps
      condition.FLBC_FieldGuid = field.FF_Guid
      condition.FFLD_TypeDesc = field.FFLD_TypeDesc
      condition.FFLD_Type = field.FFLD_Type
      condition.props = field.props
      condition.FLBC_Value = null
      condition.IsModified = true
      this.$forceUpdate()
    },
    setConditionExp(condition, val) {
      condition.IsModified = true
      condition.FLBC_ExpressionDesc = condition.exps.find(
        (x) => x.exp == val
      ).text
      this.$forceUpdate()
    },
    setConditionVal(condition, val) {
      condition.IsModified = true
      this.$forceUpdate()
    },
    deleteCondition(c) {
      c.Deleted = true
      this.$forceUpdate()
    },
    addCondition(g) {
      g.Conditions.push({
        FFLD_Type: null,
        FFLD_TypeDesc: null,
        FFLD_Expressions: null,
        FLBC_FieldGuid: null,
        FLBC_ID: 1,
        FLBC_BranchId: this.branch.FLB_Guid,
        FLBC_ConditionType: 1,
        FLBC_Index: 1,
        FLBC_Group: g.Key,
        FLBC_Value: null,
        IsNew: true,
        IsModified: false,
        Deleted: false,
        exps: [],
        props: [],
      })
      this.$forceUpdate()
    },
    addConditionGroup() {
      this.branch.ConditionGroups.push({
        Key: generateGUID(),
        Conditions: [],
      })
    },
  },
  mounted() {
    // this.conditionFields.forEach(
    //   (x) => (x.exps = JSON.parse(x.FFLD_Expressions))
    // )
    // this.$forceUpdate()
  },
}
</script>
